<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- SEO搜索引擎优化3大标签TDK -->
  <title>小兔鲜儿-新鲜、惠民、快捷</title>
  <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
  <meta name="keywords" content="小兔鲜儿，食品，生鲜，服装，家电，电商，购物">
  <!-- ************************** -->
  <!-- 显示在title旁的网站图标 -->
  <link rel="shortcut icon" hmref="favicon.ico" type="image/x-icon">
  <!-- 下面的顺序不能乱了 -->
  <link rel="stylesheet" href="./libs/iconfont/iconfont.css">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/center.css">
</head>

<body>
  <!-- 头部模块 -->
  <header>
    <!-- 快捷菜单模块 -->
    <div class="xtx-shortcut">
      <!-- 版心的盒子 -->
      <nav class="container">
        <ul class="fr">
          <li><a href="#">请先登录</a>|</li>
          <li><a href="#">免费注册</a>|</li>
          <li><a href="#">我的订单</a>|</li>
          <li><a href="#">会员中心</a>|</li>
          <li><a href="#">帮助中心</a>|</li>
          <li><a href="#">在线客服</a>|</li>
          <li><a href="#">手机版</a></li>
        </ul>
      </nav>
    </div>

    <!-- 主导航模块 -->
    <div class="xtx-main-nav container">
      <!-- logo -->
      <h1 class="logo fl">
        <!-- 这里面写上相关的文字信息原因是为了搜索引擎收录整个网站的关键字 -->
        <a href="#">小兔鲜</a>
      </h1>

      <!-- 导航 -->
      <nav class="fl">
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">生鲜</a></li>
          <li><a href="#">美食</a></li>
          <li><a href="#">餐厨</a></li>
          <li><a href="#">电器</a></li>
          <li><a href="#">居家</a></li>
          <li><a href="#">洗护</a></li>
          <li><a href="#">孕婴</a></li>
          <li><a href="#">服装</a></li>
        </ul>
      </nav>

      <!-- 搜索 -->
      <div class="search fl"><input type="search" placeholder="搜一搜"></div>

      <!-- 购物车 -->
      <div class="cart fl">
        <span>2</span>
      </div>
    </div>
  </header>

  <!-- 内容 -->
  <!--   ⬇ 设置通栏 -->
  <div class="xtx-body">
    <!-- ⬆ 设置通栏 -->
    <div class="container">
      <!-- 侧边栏 -->
      <div class="aside">1</div>
      <!-- 侧边栏 -->

      <!-- 主体内容 -->
      <div class="main">
        <!-- 用户账户概览 -->
        <div class="overview">
          <div>
            <a href="#">
              <i class="iconfont icon-icon-test6"></i>
              <p>会员中心</p>
            </a>
            <a href="#">
              <i class="iconfont icon-icon-test16"></i>
              <p>安全设置</p>
            </a>
            <a href="#">
              <i class="iconfont icon-icon-test20"></i>
              <p>地址管理</p>
            </a>
          </div>
          <div>
            <a href="#">
              <span>6</span>
              <p>优惠券</p>
            </a>
            <a href="#">
              <span>70</span>
              <p>礼品卡</p>
            </a>
            <a href="#">
              <span>120</span>
              <p>积分</p>
            </a>
          </div>
        </div>
        <!-- 用户账户概览 -->

        <!-- 订单 -->
        <div class="pannel orders">
          <div class="pannel-title">
            <h4>我的订单</h4>
            <a href="#">查看更多></a>
          </div>

          <div class="content">
            <ul>
              <li>
                <div class="goods">
                  <div class="pic">
                    <a href="#">
                      <img src="./uploads/clothes_goods_5.jpg" alt="">
                    </a>
                  </div>
                  <div class="txt">
                    <h5>张舟志气到今入过骨雷在人生土知二落木承降我的丐</h5>
                    <p>颜色：白色 尺码：M 数量：1</p>
                  </div>
                </div>
                <div class="status common">
                  <span>待付款</span>
                </div>
                <div class="pay common">
                  <p>￥99.00</p>
                  <p>（含运费：￥10.00元）</p>
                  <p>在线支付</p>
                </div>
                <div class="action common">
                  <a href="#">立即付款</a>
                  <a href="#">查看详情</a>
                  <a href="#">取消订单</a>
                </div>
              </li>
              <li>
                <div class="goods">
                  <div class="pic">
                    <a href="#">
                      <img src="./uploads/clothes_goods_5.jpg" alt="">
                    </a>
                  </div>
                  <div class="txt">
                    <h5>张舟志气到今入过骨雷在人生土知二落木承降我的丐</h5>
                    <p>颜色：白色 尺码：M 数量：1</p>
                  </div>
                </div>
                <div class="status common">
                  <span>待收货</span>
                  <a href="#">查看物流</a>
                </div>
                <div class="pay common">
                  <p>￥99.00</p>
                  <p>（含运费：￥10.00元）</p>
                  <p>在线支付</p>
                </div>
                <div class="action common">
                  <a href="#">立即付款</a>
                  <a href="#">查看详情</a>
                  <a href="#">取消订单</a>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- 订单 -->
      </div>
      <!-- 主体内容 -->
    </div>
  </div>
  <!-- 内容 -->

  <!-- 底部模块 -->
  <footer>
    <!-- 服务模块 -->
    <div class="service-box container">
      <div class="service-item">
        <h4>客户服务</h4>
        <a href="#">
          <div class="service-icon1"></div>
          <p>在线客服</p>
        </a>
        <a href="#">
          <div class="service-icon2"></div>
          <p>问题反馈</p>
        </a>
      </div>
      <div class="service-item">
        <h4>关注我们</h4>
        <a href="#">
          <div class="service-icon3"></div>
          <p>公众号</p>
        </a>
        <a href="#">
          <div class="service-icon4"></div>
          <p>微博</p>
        </a>
      </div>
      <div class="service-item">
        <h4>下载APP</h4>
        <span class="QR"></span>
        <span class="app">扫描二维码<br>立马下载APP</span>
        <button>下载页面</button>
      </div>
      <div class="service-item">
        <h4>服务热线</h4>
        <h5>400-0000-000</h5>
        <p>周一至周日 8:00-18:00</p>
      </div>
    </div>
    <!-- 宣传服务 -->
    <div class="xtx-service">
      <div class="container">
        <a href="#">价格亲民</a>
        <a href="#">物流快捷</a>
        <a href="#">品质新鲜</a>
      </div>
    </div>

    <!-- 版权信息 -->
    <div class="xtx-copyright">
      <div class="container">
        <p>
          <a href="#">关于我们</a> |
          <a href="#">帮助中心</a> |
          <a href="#">售后服务</a> |
          <a href="#">配送与验收</a> |
          <a href="#">商务合作</a> |
          <a href="#">搜索推荐</a> |
          <a href="#">友情链接</a>
        </p>
        <p>CopyRight © 小兔鲜儿</p>
      </div>
    </div>
  </footer>
</body>

</html>